<html>
  <head>
    <title>组件的拆分</title>
    <style>
      .comment {
        padding: 20px;
        width: 500px;
        height: 300px;
        background-color: #282C34;
        color: #ffffff;
      }
      .user-img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h1>组件的提取/拆分</h1>
    <div id="app"></div>

    
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.min.js"></script>
    <script type="text/babel">
      // 定义用户头像组件
      function UserImg(props) {
        return <img className={'user-img'} src={props.user.imgUrl} alt={props.user.name} />
      }

      // 定义用户信息组件
      function UserInfo(props) {
        return (
          <div>
            <UserImg user={ props.user }/>  
            <h3>昵称： { props.user.name }</h3>
          </div>
        )
      }

      // 定义内容组件
      function Comment(props) {
        return (
          <div className={'comment'}>
            <UserInfo user={ props.user } />
            <p>简介： { props.text }</p>
            <p>日期： { props.date.toLocaleDateString() }</p>
          </div>
        )
      }

      let user = {
        imgUrl: 'https://i0.hdslb.com/bfs/face/66645ce82ccdb000eeb37a3f36087f9d932d75a8.jpg',
        name: 'Diviner'
      }
      let text = '这是一个追求技术的小白';

      // 组件的复用
      function App() {
        return (
          <div>
            <Comment user={ user } text={ text } date={ new Date() }/>
          </div>
        )
      }
      ReactDOM.render(<App/>, document.getElementById('app'));
    </script>
  </body>
</html>